<template>
  <div class="container">
    <div class="gs">
      <div class="jsqbanner"><a href="javascript:;"></a></div>
      <div class="jsqct1 jsqct">
        <ul class="xzs af">
          <!--  -->
          <li class="xzli xzli1" @click="chj_sele()" :class="zzxl==1?'select':''"><span>{{zzxlc?zzxlc:'资质序列类型'}}</span>
            <ul class="pull1" :class="zzxl==1?'select':''">
              <li v-for="(data,i) in title.cs.data" :key="i" class="pl1" :name="i" @click="zzxlff1(data.id,data.infoname)">
                {{data.infoname}}
              </li>
            </ul>
          </li>
          <li class="xzli xzli2" @click="zzxl2==1?zzxl2=0:zzxl2=1" :class="zzxl2==1?'select':''"><span>{{zzxlc2?zzxlc2:'资质专业'}}</span>
            <ul class="pull2" @click="zzxl2==1?zzxl2=0:zzxl2=1" :class="zzxl2==1?'select':''">
              <li v-for="(data,i) in twonr" :key="i" class="pl1" :name="i" @click="zzxlff2(data.id,data.infoname)">
                {{data.infoname}}
              </li>
            </ul>
          </li>
          <li class="xzli xzli3" @click="zzxl3==1?zzxl3=0:zzxl3=1" :class="zzxl3==1?'select':''"><span>{{zzxlc3?zzxlc3:'资质等级'}}</span>
            <ul class="pull3" @click="zzxl3==1?zzxl3=0:zzxl3=1" :class="zzxl3==1?'select':''">
              <li v-for="(data,i) in threenr" :key="i" class="pl1" :name="i" @click="zzxlff3(data.id,data.infoname)">
                {{data.infoname}}
              </li>
            </ul>
          </li>
          <li class="xzli"><a href="javascript:;" @click="ksjs()">开始计算</a></li>
        </ul>

        <ul class="xzdnr">
          <li v-for="(data,i) in xzdnr" :key="i" >{{data}} <a href="javascript:;" @click="qcxz(i)">X</a></li>
        </ul>
        <div v-if="jsnr22!='具体价格电话联系'">
           <p class="p1">您的资质报价为：<span v-text="jsnr22"></span> 万元</p>
        </div>
        <div v-else="">
           <p class="p1">您的资质报价为：<span>具体价格电话联系</span></p>
        </div>

        <div class="shuru af phone-box" style="display: block !important;position: inherit">
          <input type="hidden" class="name" id="phone_box_name" value="请尽快联系" >
          <input type="text" class="shouji" v-model="telphone" id="phone_box_phone" placeholder="输入手机号，获取更多精准报价服务"><a href="javascript:;" @click="tjbd()" class="submit phone-box-btn">立即获取</a></div>
      </div>

      <div class="jsqct3 jsqct" :class="jsnr22=='面议'?'':'select'">
        <h3>价格详情及人员配置</h3>
        <ul class="feiyong af" v-if="jsnrdata">
          <li>人员费用 : <span>{{jsnrdata.staffPrice}} (万元)</span></li>
          <li>服务费用 : <span>{{jsnrdata.offerprice}} (万元)</span></li>
          <li>业绩费用 : <span>{{jsnrdata.performance}} (万元)</span></li>
          <li>总价 : <span>{{jsnrdata.total}} (万元)</span></li>
        </ul>
        <table class="pztb pztb1 select">
          <tr class="tr1"  v-if="!jsnrdatast">
            <th class="td1" colspan="2">费用分类</th>
            <th class="td3">配置明细</th>
            <th class="td4">单价（万）</th>
            <th class="td5">小计（万）</th>
          </tr>
          <tr class="tr2" :style="jsnrdatast==null?'':'display:none'" v-if="!jsnrdatast">
            <td class="td1" :rowspan="jsdtlbs">人员费用 <br>（建议配置）</td>
            <td class="td2">二级建造师（5人）</td>
            <td class="td3">建筑工程（5人）</td>
            <td class="td4">3 - 3.2</td>
            <td class="td5">15 - 16</td>
          </tr>
          <tr class="tr3" :style="jsnrdatast==null?'':'display:none'" v-if="!jsnrdatast">
            <td class="td2" rowspan="3">{{jsnrdata?jsnrdata.staff[0].superiorname:'职称人员'}}（5人)</td>
            <td class="td3">给排水（1人）</td>
            <td class="td4">0.8- 1</td>
            <td class="td5" rowspan="3">4.8 - 6</td>
          </tr>
          <tr class="tr3" :style="jsnrdatast==null?'':'display:none'" v-if="!jsnrdatast">
            <td class="td3">电气（1人）</td>
            <td class="td4">0.8- 1</td>
          </tr>
          <tr class="tr3" :style="jsnrdatast==null?'':'display:none'" v-if="!jsnrdatast">
            <td class="td3">结构（4人）</td>
            <td class="td4">0.8- 1</td>
          </tr>
          <tr class="tr6" :style="jsnrdatast==null?'':'display:none'" v-if="!jsnrdatast">
            <td class="td2">技工人员（30人）</td>
            <td class="td3">电工（30人）</td>
            <td class="td4">0.05-0.07</td>
            <td class="td3">1.5 -2.1</td>
          </tr>

          <!--<tr class="tr2" v-for="(data,i) in jsnrdatast" :key="i" :name="data">-->
            <!--<td class="td1" v-if="i==0" :rowspan="jsnrdatast.length">人员费用 <br>（建议配置）</td>-->
            <!--<td class="td2" :rowspan="Object.keys(data).length-1">{{data?data.superiorname:''}}</td>-->
            <!--<td class="td3">{{data['0'].staff_name}} ({{data['0'].number}}人)</td>-->
            <!--<td class="td4">{{data['0'].price}}</td>-->
            <!--<td class="td5" :rowspan="Object.keys(data).length-1">{{data['0'].priceTotal+data['1']?data['1'].priceTotal:0+data['2']?data['2'].priceTotal:0+data['3']?data['3'].priceTotal:0+data['4']?data['4'].priceTotal:0}}</td>-->
          <!--</tr>-->

          <tr class="tr7" v-if="!jsnrdatast">
            <td class="td1">业绩费用</td>
            <td class="td2">技术负责人（1人）</td>
            <td class="td3">——</td>
            <td class="td4">{{jsnrdata?jsnrdata.performance:'0.2'}}</td>
            <td class="td3">{{jsnrdata?jsnrdata.performance:'0.2'}}</td>
          </tr>
          <tr class="tr8" v-if="!jsnrdatast">
            <td class="td1">服务费用</td>
            <td class="td2">服务代理项（1项）</td>
            <td class="td3">——</td>
            <td class="td4">{{jsnrdata?jsnrdata.offerprice:'7-9'}}</td>
            <td class="td3">{{jsnrdata?jsnrdata.offerprice:'7-9'}}</td>
          </tr>
          <tr class="tr9" v-if="!jsnrdatast">
            <td class="td1" colspan="2">总计</td>
            <td class="td2" colspan="2">人员费用 + 业绩费用 + 服务费用</td>
            <td class="td3">{{jsnrdata?jsnrdata.total:'28.5 -33.3'}}</td>
          </tr>
          <tr class="tr10">
            <td class="td1" :colspan="5">人员配置，是根据各专业人员的价格、市场存量及共用性等因素，科学计算后得出，该报价受国家政策、地区、服务周期等多因素影响，请酌情参考，精准报价请咨询建筑资质顾问</td>
          </tr>
        </table>

      </div>



      <div class="hsqct2 jsqct"  v-if="zzbzcode == 1">
        <h3>资质标准</h3>
        <div class="ct">
          <table class="bztb">
              <tr class="tr1" >
                <th class="td1">要求分类</th>
                <th class="td2">资质分项</th>
                <th class="td3">要求明细</th>
              </tr>
            <tbody>
              <tr :class="'tr'+(index+2)" v-for="(i,index) in zzbzdata" :key='index'>
                <td class="td1">{{i.val1}}</td>
                <td class="td2">{{i.val2}}</td>
                <td class="td3">{{i.val3}}</td>
              </tr>
            </tbody>
          </table>

        </div>

      </div>

      <div v-else>

      </div>


      <my-heart></my-heart>
    </div>
    <my-ft></my-ft>
    <div class="bdtjtc2" style="background: rgba(0,0,0,.7);color: white">
      <span style="color: white">×</span>
      {{tcmsg}}
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    name: 'HelloWorld',
    data () {
      return {
        selenv:false,
        title:null,
        yqljData:null,
        dlzt:'',
        zzxl:0,
        zzxlc:0,
        zzxlc2:0,
        zzxlc3:0,
        jsid:0,
        jsnr:'28.5-33.3',
        jsd0jg:6,
        jsnrdata:null,
        jsnrdatast:null,
        jsdtlbs:5,
        jsnr22:'28.5-33.3',
        xzdsz:[],
        xzdnr:[],
        twonr:[],
        erji:[],
        threenr:[],
        zzxl2:0,
        zzxl3:0,
        jianlis:['一级建造师','二级建造师','监理工程师','造价工程师','结构工程师','注册建筑师'],
        jianli:0,
        huatis:['政策解读','建筑资讯','建造师行情','建造师考试'],
        huati:0,
        username:'',
        tcmsg:'',
        xiangqingms:'',
        telphone:'',
        fuwu:1,
        sjsz:[],
        zzbzcode:'',
        zzbzdata:''
      }
    },
    async asyncData ({ params }) {
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/QualificationCounter/qualificationInfoList`);
    let data  = {nav:nh.data,cs:nh2.data};
    return { title: data}
  },
  mounted:function(){
    // console.log(this.title);
    var _this = this;
    var cd = this.title.cs.data;
    console.log(cd);

  },
  head() {
    return {
      title: '资质代办费用_资质办理价格_资质计算器_企业邦',
      meta: [
        { hid: 'description', name: 'description', content: '建筑资质代办费用,资质办理价格,资质代办多少钱,代办资质如何收费,企业资质查询'},
        { hid: 'keywords', name: 'keywords', content:'企业邦-24小时免费服务400-855-1888,企业经营资质服务平台,提供建筑资质代办费用,资质办理价格,资质代办多少钱,代办资质如何收费,企业资质查询等专业的全方位企业服务。' }
      ]
    }
  },methods:{


  chj_sele:function(){
   var _this = this;
    if(_this.zzxl==1){
      _this.zzxl=0
    }else{
      _this.zzxl=1
    }

  },


    xqymtz:function(e1,e2){
      let href = '/ServiceDetails/'+e1+'?name='+e2;
      window.open(href,'_blank');
    },
    tzym:function(e){
      let href = '/Details/'+e;
      window.open(href,'_blank');
    },
    zzxlff1:function(e,e2){
      var _this = this;
      _this.zzxlc = e2;
      _this.$axios.post('api/PInterface/QualificationCounter/qualificationInfoList','pid='+e
      )
        .then(function(response){
          _this.twonr = response.data.data;
          console.log(_this.twonr)





        });
    },
    zzxlff2:function(e,e2){
      var _this = this;
      _this.zzxlc2 = e2;
      console.log(e);
      _this.$axios.post('api/PInterface/QualificationCounter/qualificationInfoList','pid='+e
      )
        .then(function(response){
          _this.threenr = response.data.data;
          console.log(_this.threenr)
          _this.zzxlc3 = _this.threenr[0].infoname
         if(_this.xzdsz.indexOf(e) == -1){
           _this.xzdnr.push(_this.zzxlc2+_this.zzxlc3);
           _this.xzdsz.push(_this.threenr[0].id);
         }
        });



      if(this.zzxl2==1){
        this.zzxl2=0;
      }else{
        this.zzxl2=1;
      }


    },
    zzxlff3:function(e,e2){
        this.jsid = e;
        if(this.zzxl3==1){
          this.zzxl3 = 0;
        }else{
          this.zzxl3 = 1;
        }
        this.zzxlc3 = e2;


      // if(this.xzdsz.indexOf(e) == -1){
      //   this.xzdnr.push(this.zzxlc2+e2);
      //   this.xzdsz.push(e);
      // }
      // console.log(this.xzdsz)



    },
    ksjs:function(){
      var _this = this;
      _this.zzxlc = ''
      _this.zzxlc2 = ''
      _this.zzxlc3 = ''
      console.log(_this.xzdsz)
      _this.$axios.post('api/PInterface/QualificationCounter/settlementPrice','id='+_this.xzdsz
      )
        .then(function(response){

          if(response.data.msg == "您还未选择资质"){
            _this.tcmsg = '您还未选择资质!!';
            $('.bdtjtc2').addClass('select');
            $('.bdtjtc2').fadeIn(0);
            $('.bdtjtc2').fadeOut(2500);
          }else if(response.data.msg == "您选择的是面议!!"){
            var a = '具体价格电话联系';
            _this.jsnr22= a;
            _this.tcmsg = '具体价格电话联系';
            $('.bdtjtc2').addClass('select');
            $('.bdtjtc2').fadeIn(0);
            $('.bdtjtc2').fadeOut(2500);

          }else{
            _this.jsnr22 =  String(response.data.data.total) ;
            // console.log(typeof(_this.jsnr));
            console.log(_this.jsnr)

            _this.jsnrdata = response.data.data;
            _this.jsnrdatast = response.data.data.staff;
            var dt = response.data.data.staff;
            var shu = 0;
            for (let i=0;i<dt.length;i++){
              shu = shu + Object.keys(dt[i]).length -1;

            }
            _this.jsdtlbs = shu;
            $('.jsqct3 table tr').css('display','none');

            let tr = `<tr class="tr1">
            <th class="td1" colspan="2">费用分类</th>
            <th class="td3">配置明细</th>
            <th class="td4">单价（万）</th>
            <th class="td5">小计（万）</th>
        </tr>`;
            let number=0;
            $.each(response.data.data.staff,function (k,i) {

              $.each(i,function (key,v) {
                let th ="";
                if (key==0){
                  if (k==0){
                    th+=`<td class="td1" rowspan="staffNumber">人员费用 <br>（建议配置）</td>`;
                  }
                  th+=`<th class="td`+(parseInt(key)+1)+`" rowspan="`+(Object.keys(i).length-1)+`">`+i.superiorname+`</th>`;

                }
                if(typeof v.staff_name !== "undefined"){
                  th+=`<th class="td`+(parseInt(key)+1)+`" >`+v.staff_name+`(`+v.number+`人)</th>`;
                  th+=`<th class="td`+(parseInt(key)+1)+`" >`+v.price+`</th>`;
                  th+=`<th class="td`+(parseInt(key)+1)+`" >`+v.priceTotal+`</th>`;
                  tr+= '<tr class="tr'+(k+2)+'">'+th+'</tr>';
                  number++;
                }

              });

            });
            tr+=`<tr class="tr7">
            <td class="td1">业绩费用</td>
            <td class="td2">技术负责人（1人）</td>
            <td class="td3">——</td>
            <td class="td4">`+response.data.data.performance+`</td>
            <td class="td3">`+response.data.data.performance+`</td>
        </tr>
        <tr class="tr8">
            <td class="td1">服务费用</td>
            <td class="td2">服务代理项（1项）</td>
            <td class="td3">——</td>
            <td class="td4">`+response.data.data.offerprice+`</td>
            <td class="td3">`+response.data.data.offerprice+`</td>
        </tr>
        <tr class="tr9">
            <td class="td1" colspan="2">总计</td>
            <td class="td2" colspan="2">人员费用 + 业绩费用 + 服务费用</td>
            <td class="td3">`+response.data.data.total+`</td>
        </tr>
        <tr class="tr10">
            <td class="td1" colspan="5">人员配置，是根据各专业人员的价格、市场存量及共用性等因素，科学计算后得出，该报价受国家政策、地区、服务周期等多因素影响，请酌情参考，精准报价请咨询建筑资质顾问</td>
         </tr>`;
            $('.jsqct3').addClass(' select');
            $('.pztb1 ').addClass(' select');
            $('.p1 span').html(response.data.data.total);
            $('.qualificationPrice').css("display","block");
            let qualificationPrice = $('.qualificationPrice').find('span');

            qualificationPrice.eq(0).html(response.data.data.staffPrice+"（万）");
            qualificationPrice.eq(1).html(response.data.data.offerprice+"（万）");
            qualificationPrice.eq(2).html(response.data.data.performance+"（万）");
            $('.jsqct3 table').prepend(tr.replace('staffNumber',number));

          }

        });

      // console.log(this.jsnr22);

           _this.$axios.post('api/PInterface/QualificationCounter/getQualificationClaim','id='+_this.xzdsz
           ).then(function(response){
              _this.zzbzcode = response.data.code
              _this.zzbzdata = response.data.data
                // console.log(_this.xzdsz)
                //      console.log(response)
           })


    },
    qcxz:function(e){
       this.xzdsz.splice(e,1);
      this.xzdnr.splice(e,1);
    },
    tjbd:function(e){
      var _this = this;


      if(this.telphone == ''){
        this.tcmsg = '信息填写不完整';
        $('.bdtjtc2').addClass('select');
        $('.bdtjtc2').fadeIn(0);
        $('.bdtjtc2').fadeOut(2500);
        return false;
      }
      //
      var regex= /^1[3|4|5|6|7|8|9][0-9]{9}$/;
      if(!regex.exec(this.telphone)){
        this.tcmsg = '手机号码格式错误';

        $('.bdtjtc2').addClass('select');
        $('.bdtjtc2').fadeIn(0);
        $('.bdtjtc2').fadeOut(2500);

        // $("#shouji2").focus();
        return false;
      }
      var sj;
      // if(this.$route.query.name){
      sj = 'username='+this.username+'&telphone='+this.telphone+'&content='+this.xiangqingms+'&serviceid='+327;
      // }else{
      //   sj = 'username='+this.username+'&telphone='+this.telphone+'&content='+this.xiangqingms+'&serviceid='+'';
      // }
      _this.$axios.post('/api'+'/PInterface/Form/formSubmitInterface',sj)
        .then(function(response){
          if(response.data == 'execute_success'){
            _this.tcmsg = '提交成功,稍后会有人员与你联系';
            $('.bdtjtc2').addClass('select');
            $('.bdtjtc2').fadeIn(0);
            $('.bdtjtc2').fadeOut(2500);
            _this.username = '';
            _this.telphone = '';
            _this.xiangqingms = '';
          } else if(response.data == 'telphone_is_null'){
            _this.tcmsg = '电话是空值';
            $('.bdtjtc2').addClass('select');
            $('.bdtjtc2').fadeIn(0);
            $('.bdtjtc2').fadeOut(2500);
          }else if(response.data == 'serviceid_error'){
            _this.tcmsg = '业务id错误';
            $('.bdtjtc2').addClass('select');
            $('.bdtjtc2').fadeIn(0);
            $('.bdtjtc2').fadeOut(2500);
          }else if(response.data == 'telphone_type_error'){
            _this.tcmsg = '电话类型错误';
            $('.bdtjtc2').addClass('select');
            $('.bdtjtc2').fadeIn(0);
            $('.bdtjtc2').fadeOut(2500);
          }else if(response.data == 'execute_error'){
            _this.tcmsg = '执行错误';
            $('.bdtjtc2').addClass('select');
            $('.bdtjtc2').fadeIn(0);
            $('.bdtjtc2').fadeOut(2500);
          }
        });
    }
  }
  }
</script>

<style>

</style>
